<template>
  <div>
    <el-card>
      <el-row>
        <el-col :span="24" style="text-align: left">
          <el-form
            :inline="true"
            ref="form"
            :model="formInline"
            label-width="120px"
            class="demo-form-inline"
          >
            <el-form-item label="年份:" prop="dataType">
              <el-select v-model="formInline.year" filterable @change="Time()">
                <el-option
                  v-for="item in yearAll"
                  :key="item.label"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="月份:" prop="type">
              <el-date-picker
                v-model="formInline.month"
                type="monthrange"
                range-separator="至"
                start-placeholder="开始月份"
                end-placeholder="结束月份"
                value-format="yyyy-M"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="search"
                size="small"
                icon="el-icon-search"
              >
                查询
              </el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>
    <el-row>
      <el-col :span="24">
        <el-button @click="prev" style="margin-top: 10px">返回</el-button>
        <div
          ref="chartEle"
          style="margin-top: 40px; height: 480px"
          id="chart"
        ></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'
import echarts from 'echarts'
import mockDayData from './mock/day'
export default {
  name: 'yearcompare',
  data() {
    return {
      name: '',
      formInline: {
        year: '',
        month: '',
      },
      yearAll: [
        {
          label: 2020,
          value: 2020,
        },
      ],
      options: null,
      myChart: null,
      monthLists: [
        '1月',
        '2月',
        '3月',
        '4月',
        '5月',
        '6月',
        '7月',
        '8月',
        '9月',
      ],
      fristTotals: [
        1098,
        1123,
        1151,
        1182,
        1215,
        1230,
        1262,
        1293,
        1328,
        1200,
        1280,
        1208,
      ], //2019总年度量
      lastTotals: [1108, 1133, 1161, 1182, 1205, 1235, 1258, 1283, 1308], //2020总年度量
      yearOns: [0.9, 0.8, 0.8, 0, -0.8, 0.4, -0.3, -0.7, -1.5], //同比
      Chains: [0, 2.2, 2.4, 1.8, 1.9, 2.4, 1.8, 1.9, 1.9], //环比
      monthList: [],
      fristTotal: [],
      lastTotal: [],
      yearOn: [],
      Chain: [],
    }
  },
  components: {},
  created() {
    this.drawEcharts()
  },
  mounted() {
    this.myChart = echarts.init(this.$refs.chartEle)
    this.clickChart()
  },
  methods: {
    Time() {
      this.formInline.month = ['2020-1', '2020-9']
    },
    search() {
      this.monthList = []
      this.fristTotal = []
      this.lastTotal = []
      this.yearOn = []
      this.Chain = []
      this.indexOne = this.formInline.month[0].slice(5)
      this.indexTwo = this.formInline.month[1].slice(5)
      this.monthList = this.monthLists.slice(
       this.indexOne - 1, this.indexTwo
      )
      this.fristTotal = this.fristTotals.slice(
       this.indexOne - 1, this.indexTwo
      )
      this.lastTotal = this.lastTotals.slice(
       this.indexOne - 1, this.indexTwo
      )
      this.yearOn = this.yearOns.slice(
        this.indexOne - 1, this.indexTwo
      )
      this.Chain = this.Chains.slice(
       this.indexOne - 1, this.indexTwo
      )
      this.drawEcharts()
    },
    //渲染图表
    drawEcharts() {
      let self = this
      this.$nextTick(() => {
        // let echart = echarts.init(document.getElementById('chart'))
        this.myChart.resize()
        self.options = {
          title: {
            text: '',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999',
              },
            },
          },
          legend: {
            data: ['2019', '2020', '同比', '环比'],
          },
          xAxis: [
            {
              type: 'category',
              data: self.monthList,
              axisPointer: {
                type: 'shadow',
              },
            },
          ],
          yAxis: [
            {
              type: 'value',
              min: 1000,
              name: '',
              axisLabel: {
                formatter: '{value}',
              },
            },
            {
              type: 'value',
              min: -4,
              max: 4,
              name: '',
              axisLabel: {
                formatter: '{value} %',
              },
            },
          ],
          series: [
            {
              name: '2019',
              type: 'bar',
              data: self.fristTotal,
              barGap: '0', // Make series be overlap
              barWidth: 30,
            },
            {
              name: '2020',
              type: 'bar',
              data: self.lastTotal,
              barWidth: 30,
            },
            {
              name: '同比',
              type: 'line',
              yAxisIndex: 1,
              data: self.yearOn,
            },
            {
              name: '环比',
              type: 'line',
              yAxisIndex: 1,
              data: self.Chain,
            },
          ],
        }
        self.options.title.text = '年度同比、环比\n'
        this.myChart.setOption(self.options, true)
      })
    },
    //图表点击下钻
    clickChart() {
      this.myChart.on('click', (params) => {
        let data = mockDayData
        this.myChart.resize()
        this.options = {
          title: {
            text: '',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999',
              },
            },
          },
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              data: [820, 932, 901, 934, 1290, 1330, 1320],
              type: 'line',
            },
          ],
        }
        this.options.title.text = `${params.seriesName}年${params.name}详细数据折线图`
        this.options.xAxis.data = data[params.seriesName][params.name][0]
        this.options.series[0].data =
          data[params.seriesName][params.name][1]
        this.renderChart(this.options)
      })
    },
    //获取图表数据
    renderChart(option) {
      this.myChart.setOption(option, true)
      window.addEventListener('resize', () => {
        this.myChart.resize()
      })
    },
    //返回上一步图表数据
    prev() {
      this.drawEcharts()
    },
  },
}
</script>
<style scoped>
.el-row {
  margin-bottom: 20px;
}
</style>
